<template>
  <div class="app-container">
    <!-- 操作面板 -->
    <div class="filter-container">
      <el-form :inline="true" :model="listQuery" class="form-inline">
        <el-form-item label="">
          <el-input
            v-model="listQuery.keyword"
            placeholder="请输入关键词"
            clearable
            size="medium"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="medium"
            @click="handleFilter"
            >搜索</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="success"
            icon="el-icon-plus"
            size="medium"
            @click="handleAdd()"
            >新增</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-popover
            v-model="popover_column"
            ref="popoverColumnList"
            placement="bottom"
            trigger="click"
          >
            <el-checkbox
              class="checkbox-vertical"
              v-model="item.show"
              v-for="item in tableColumn"
              :key="item.prop"
            >
              {{ item.label }}</el-checkbox
            >
          </el-popover>
          <el-button
            size="medium"
            icon="el-icon-s-grid"
            :class="{ 'btn-grey-focus': popover_column }"
            v-popover:popoverColumnList
          >
            显示项
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="table-container">
      <el-table
        v-loading="listLoading"
        :data="tableData"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
        :header-cell-style="{ background: '#F3F4F7', color: '#555' }"
      >
        <el-table-column
          v-for="item in filterTableColumn"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :min-width="item.minWidth"
          :show-overflow-tooltip="item.tooltip"
          align="center"
        >
          <template slot-scope="scope">
            <table-column :scope="scope" :item="item"></table-column>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="160">
          <template slot-scope="{ row }">
            <!-- <el-button
              type="warning"
              icon="el-icon-key"
              circle
              size="mini"
              @click="handlePermission(row.id)"
            /> -->
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              size="mini"
              @click="handleEdit(row.id)"
            />
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              size="mini"
              @click="handleDelete(row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.listRows"
      @pagination="refresh"
    />
    <!-- 节点弹框 -->
    <permission
      :title="permission.title"
      :visible="permission.visible"
      :form="permission.form"
      :roleId="permission.roleId"
      :removeClose="removePermissionClose"
    />
  </div>
</template>

<script>
import ListMixin from "@/mixin/list";
import { listRole, deleteRole } from "@/api/role";
import permission from "./components/Permission";

export default {
  mixins: [ListMixin],
  components: {
    permission,
  },
  data() {
    return {
      permission: {
        title: "",
        visible: false,
        form: {},
        roleId: "",
      },
      tableColumn: [
        {
          show: true,
          prop: "id",
          label: "ID",
          minWidth: "50",
        },
        {
          show: true,
          prop: "name",
          label: "角色名",
          minWidth: "80",
        },
        {
          show: true,
          prop: "remark",
          label: "备注",
          minWidth: "100",
        },
      ],
    };
  },
  methods: {
    // 列表
    fetchData() {
      this.listLoading = true;
      listRole(this.listQuery).then((response) => {
        this.tableData = response.data.data;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    // 新增
    handleAdd() {
      this.$router.push("/auth/role/add");
    },
    // 编辑
    handleEdit(id) {
      this.$router.push({
        name: "RoleEdit",
        params: {
          id: id,
        },
      });
    },
    // 删除
    deleteData(id) {
      deleteRole(id).then((response) => {
        if (response.code == 1) {
          this.$notify({
            title: response.message,
            message: response.message,
            type: response.code == 1 ? "success" : "error",
            duration: 2000,
          });
          this.fetchData();
        }
      });
    },
    // 打开节点弹框
    handlePermission(id) {
      console.log(id);
      this.permission.visible = true;
      this.permission.title = "设置节点";
      this.permission.roleId = id;
    },
    // 关闭节点弹窗
    removePermissionClose() {
      this.permission.visible = false;
      this.permission.form = {};
      this.permission.roleId = "";
    },
  },
};
</script>

<style>
</style>